<template>
  <div>
    <el-container style="height: 500px;">
      <!--      侧边栏-->
      <el-aside  class="m-aside">
        <!--        logo和系统名称-->
        <div class="m-sysName" >
          <img src="@/assets/logo.png" alt="" width="10%">
          <span class="m-nameText">商城后台</span>
        </div>
        <!--        侧边菜单栏-->
        <el-menu class="el-menu"  :default-active="$route.path" router >
          <el-submenu index="1" v-if="user.role===1" >
            <template slot="title"><i class="el-icon-edit-outline"></i>工作台</template>
            <el-menu-item index="/manager/workplace">工作台</el-menu-item>
          </el-submenu>
          <el-submenu index="12">
            <template slot="title"><i class="el-icon-postcard"></i>新闻管理</template>
            <el-menu-item index="/manager/news">新闻管理</el-menu-item>
          </el-submenu>
          <el-submenu index="11">
            <template slot="title"><i class="el-icon-finished" ></i>反馈管理</template>
            <el-menu-item index="/manager/shenhe">反馈</el-menu-item>
          </el-submenu>
<!--          <el-submenu index="2" v-if="user.role===1">-->
<!--            <template slot="title"><i class="el-icon-bell"></i>消息通知</template>-->
<!--            <el-menu-item index="/manager/message">消息</el-menu-item>-->
<!--          </el-submenu>-->
          <el-submenu index="3" v-if="user.role===1">
            <template slot="title"><i class="el-icon-pie-chart"></i>数据统计</template>
            <el-menu-item index="/manager/data">数据统计</el-menu-item>
          </el-submenu>
          <el-submenu index="4" v-if="user.role===1">
            <template slot="title"><i class="el-icon-takeaway-box"></i>商品管理</template>
            <el-menu-item index="/manager/goods">商品管理</el-menu-item>
          </el-submenu>
          <el-submenu index="5" v-if="user.role===1">
            <template slot="title"><i class="el-icon-shopping-cart-full"></i>套餐管理</template>
            <el-menu-item index="/manager/combo">套餐管理</el-menu-item>
          </el-submenu>
          <el-submenu index="6" v-if="user.role===1">
            <template slot="title"><i class="el-icon-news"></i>分类管理</template>
            <el-menu-item index="/manager/clazz">分类管理</el-menu-item>
          </el-submenu>
          <el-submenu index="45" >
            <template slot="title"><i class="el-icon-location-outline"></i>地址管理</template>
            <el-menu-item index="/manager/addressbook">地址管理</el-menu-item>
          </el-submenu>
          <el-submenu index="7">
            <template slot="title"><i class="el-icon-truck"></i>订单管理</template>
            <el-menu-item index="/manager/order_of">订单管理</el-menu-item>
          </el-submenu>
          <el-submenu index="10" v-if="user.role===1">
            <template slot="title"><i class="el-icon-user"></i>使用者管理</template>
            <el-menu-item index="/manager/admin">管理员管理</el-menu-item>
            <el-menu-item index="/manager/user">用户管理</el-menu-item>
          </el-submenu>
<!--          <el-submenu index="9" v-if="user.role===1">-->
<!--            <template slot="title"><i class="el-icon-set-up"></i>系统设置</template>-->
<!--            <el-menu-item index="/manager/system">系统设置</el-menu-item>-->
<!--          </el-submenu>-->
          <el-submenu index="35" v-if="user.role===2" >
            <template slot="title"><i class="el-icon-set-up"></i>个人中心</template>
            <el-menu-item index="/manager/userInfo">个人信息</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--      右侧-->
      <el-container class="right-container">
        <!--        顶部菜单栏-->
        <el-header class="top-header">
          <img :src="user.avatar" alt="" style="width: 40px; height:40px;border-radius: 50%;margin-right: 10px;">
          <span style="color: #42b983;font-weight: bold;font-size: 14px;margin-right: 20px">欢迎您，{{user.userName}}</span>
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <div @click="logout"><el-dropdown-item>退出登录</el-dropdown-item></div>
            </el-dropdown-menu>
          </el-dropdown>

        </el-header>
        <!--表单-->
        <el-main >
          <div>
            <router-view/>
          </div>


        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "ManagerLayout",

  data () {
    return {
      // 定义User对象，从缓存里取值
      user: JSON.parse(localStorage.getItem("user") || {}),
    }
  },


  methods: {
// 退出登录方法
    logout() {
      localStorage.removeItem("user");
      this.$router.push("/login");
    }
  }

}
</script>
